<template>
	<view>
		<view class="GYclass">
			<!-- 插入视频 -->
			<image :src="GYhuangList.gyCoursePhotoUrl" class="img"></image>
			<text class="day">{{formattedData(GYhuangList.gyCourseCreatetime)}}</text>
			<!-- 基本介绍 -->
			<view class="imgBasic">
				<text class="titleBasic">{{GYhuangList.gyCourseTitle}}</text>
				<view class="contBasic">
					<rich-text :nodes="richText"></rich-text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import * as HomeApi from '@/api/home/home.js'
	export default {
		onLoad(options) {
			const paramsStr = options.params || null; // 获取URL查询参数中的params字段
			console.log(options)

			if (paramsStr != null) {
				const receivedParams = JSON.parse(paramsStr);
				this.targetId = receivedParams.targetId;
				this.initGYList(this.targetId);


			}

		},
		data() {
			return {
				targetId: null,
				GYhuangList: {},
				richText: null
			};
		},
		methods: {
			//日期格式规范
			formattedData(dateStr) {
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份是从0开始的
				const day = date.getDate();

				return `${year}年${month}月${day}日`;
			},
			
			
			processRichTextContent(rawContent) {
				if (!rawContent) return '';

				// 使用正则表达式来匹配<img>标签的style属性并移除它
				// 然后为<img>标签添加新的style属性设置宽度为100%和高度为auto
				let processedContent = rawContent.replace(/(<img[^>]+)style="[^"]*"/gi,
					'$1 style="width: 100%; height: auto;"');

				return processedContent;
			},


			async initGYList(id) {
				const res = await HomeApi.selectGYbyId(id);
				console.log(res);
				if (res.data.code === 200) {
					this.GYhuangList = res.data.data
					this.richText = this.processRichTextContent(this.GYhuangList.gyCourseContent);
					console.log("国医的数据")
				}

			}

		}


	}
</script>

<style lang="scss">
	.GYclass {
		padding: 0;
		margin: 0;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		.img {
			box-sizing: border-box;
			width: 100%;
			top: 24rpx;
			height: 424rpx;
		}

		.day {
			margin-top: 20rpx;
			box-sizing: border-box;
			width: calc(100vw - 56rpx);
			height: 36rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 34.76rpx;
			color: rgba(51, 51, 51, 1);
			text-align: right;
			vertical-align: top;

		}
	}

	.imgBasic {

		margin-top: 30rpx;

		.titleBasic {
			box-sizing: border-box;
			margin-bottom: 20rpx;
			width: calc(100vw - 56rpx);
			height: 46rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0rpx;
			line-height: 45.98rpx;
			color: rgba(0, 0, 0, 1);
			text-align: left;
			vertical-align: top;
		}

		.contBasic {
			box-sizing: border-box;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			width: calc(100vw - 56rpx);
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 300;
			letter-spacing: 0rpx;
			line-height: 46.34rpx;
			color: rgba(0, 0, 0, 1);
			text-align: justify;
			vertical-align: top;

			image {
				box-sizing: border-box;
				width: 100% !important;
				height: auto !important;
			}
		}
	}
</style>